<template>
  <div class="app-container">
    <el-card class="box-card mb20">
      <div class="fontSizeB">店铺记分 / 计次情况</div>
      <div class="flex-between ml20 mr20">
        <div v-for="(item,index) in storeScoreList" :key="index">
          <div class="text-center mt20">
            <div class="fontSize16"> {{ item.text }}</div>
            <div class="mt10 mb10 fontSize18">
              <span class="text-danger fontSize26">{{ item.num }}</span> 分
              <!--              <el-progress :stroke-width="15" type="circle" :percentage="item.num"></el-progress>-->
            </div>
            <div class="fontSize14 text-muted">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </el-card>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <!--      <el-form-item label="记分类型" prop="storeId">-->
      <!--        <el-select v-model="queryParams.storeId" placeholder="请选择记分类型" filterable clearable>-->
      <!--          <el-option v-for="(item,index) in storeList" :key="index"-->
      <!--                     :label="item.label"-->
      <!--                     :value="item.id"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="违规规则类型" prop="storeId">-->
      <!--        <el-select v-model="queryParams.storeId" placeholder="请选择违规规则类型" filterable clearable>-->
      <!--          <el-option v-for="(item,index) in storeList" :key="index"-->
      <!--                     :label="item.label"-->
      <!--                     :value="item.id"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="违规编号" prop="storeAlias">-->
      <!--        <el-input v-model="queryParams.storeAlias" placeholder="请输入违规编号" clearable/>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item>-->
      <!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
      <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
      <!--      </el-form-item>-->
    </el-form>
    <el-row :gutter="10" class="mb8"></el-row>
    <!--  店铺列表  -->
    <el-table v-loading="loading" :data="violationLogList" border stripe>
      <el-table-column label="违规类型" align="center" prop="violationType"/>
      <el-table-column label="违规编号" align="center" prop="violationNo"/>
      <el-table-column label="违规对象" align="center" prop="violationObject"/>
      <el-table-column label="处罚时间" align="center" prop="punishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.punishTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扣分/计次" align="center" prop="pointOrCount"/>
      <el-table-column label="处罚状态" align="center" prop="punishStatus"/>
      <!--      <el-table-column label="处罚原因" align="center" prop="punishReason"/>-->
      <!--      <el-table-column label="处罚依据" align="center" prop="punishBasis"/>-->
      <!--      <el-table-column label="违规影响" align="center" prop="violationImpact"/>-->
      <!--      <el-table-column label="违规商品ID" align="center" prop="violationProductIds"/>-->
      <!--      <el-table-column label="违规商品主图" align="center" prop="violationProductPic"/>-->
      <!--      <el-table-column label="操作建议及提醒" align="center" prop="tips"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleViewData(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <el-dialog append-to-body :visible.sync="isOpen" width="1000px" title="违规详情">
      <el-descriptions :column="1" :border="true" :labelStyle="{'width': '150px'}">
        <el-descriptions-item label="记分/计次类型">{{ violationDetail.violationType }}</el-descriptions-item>
        <el-descriptions-item label="违规编号">{{ violationDetail.violationNo }}</el-descriptions-item>
        <el-descriptions-item label="处罚时间">{{ parseTime(violationDetail.punishTime) }}</el-descriptions-item>
        <el-descriptions-item label="记分/计次">{{ violationDetail.pointOrCount }}</el-descriptions-item>
        <el-descriptions-item label="处罚状态">
          <el-tag size="small">{{ violationDetail.punishStatus }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="违规原因">{{ violationDetail.punishReason }}</el-descriptions-item>
        <el-descriptions-item label="处罚依据">{{ violationDetail.punishBasis }}</el-descriptions-item>
        <el-descriptions-item label="违规影响">{{ violationDetail.violationImpact }}</el-descriptions-item>
        <el-descriptions-item label="违规对象">{{ violationDetail.violationObject }}</el-descriptions-item>
        <el-descriptions-item label="违规商品ID">{{ violationDetail.violationProductIds }}</el-descriptions-item>
        <el-descriptions-item label="违规商品主图">
          <image-preview :src="violationDetail.violationProductPic" width="60px"></image-preview>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpen = false">取消</el-button>
        <el-button type="primary" @click="isOpen = false">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {getAutoViolationRecord, listAutoViolationRecord} from "@/api/autoOperation/violation";
import {align} from "quill/ui/icons";

export default {
  computed: {
    align() {
      return align
    }
  },
  dicts: ['auto_config_status'],
  data() {
    return {
      loading: false,
      showSearch: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: undefined,
      },
      violationLogList: [],//违规记录列表
      total: 0,//数据总条数
      isOpen: false,//是否打开违规详情弹窗
      storeScoreList: [],//店铺记分情况列表
      violationDetail: "",//违规详情
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查看详情
    handleViewData(row) {
      getAutoViolationRecord({id: row.id}).then(res => {
        this.violationDetail = res
        this.isOpen = true
      })
    },
    // 跳转违规记录
    goViolationLog(row) {
      this.$router.push({
        path: "violation/violationDetail",
        query: {
          cookie_str: row.cookie,
        }
      })
    },
    // 获取违规记录列表
    getList() {
      this.loading = true
      this.queryParams.storeId = this.$route.query.storeId
      // this.queryParams.storeId = '1724693614171009025'
      listAutoViolationRecord(this.queryParams).then(res => {
        this.loading = false
        let data = res.data.records
        this.violationLogList = data.list
        this.total = data.total
        this.getStoreScoreList(res.data)

      })
    },
    // 获取记分情况列表
    getStoreScoreList(data) {
      this.storeScoreList = [];
      this.storeScoreList.push({
        num: data.violationType1Point,
        title: "达12分及12的倍数会冻结7天",
        text: "商品信息质量违规"
      }, {
        num: data.violationType2Point,
        title: "达6/12/24/36/48分会有处罚",
        text: "知识产权禁限售违规"
      }, {
        num: data.violationType3Point,
        title: "达12/24/36/48分会有处罚",
        text: "交易违规及其他"
      }, {
        num: data.violationType4Point,
        title: "达1次/2次/3次会有处罚",
        text: "知识产权严重违规"
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style scoped>

</style>
